To get your posts appearing in the correct order (usually newest at the top), we’ll use 11ty’s built-in date handling and a small tweak to your sidebar loop.
1. Ensure your posts have dates
Eleventy is smart about dates. It can get the date for a post in three ways:
-
From the filename: If you name your file 2026-02-03-my-post.md, 11ty automatically assigns that date.
-
From the Front Matter: You can manually set it like this:
YAMLtitle: My Post
date: 2026-02-03 -
From the file creation date: If you do neither, 11ty uses the date the file was created on your computer (this is less reliable).
---
2. Update the Sidebar (Sorting & Formatting)
Go back to your _includes/layout.njk file. We will modify the loop to reverse the order (newest first) and display the date next to the link.
Replace your
HTML
---
3. Making Dates Look Better (Optional but Recommended)
The .toDateString() method outputs dates like Mon Feb 03 2026. If you want more control (like Feb 03, 2026), you can add a "filter" to your configuration.
-
Open (or create) .eleventy.js in your project root.
-
Add this filter:
JavaScript
const { DateTime } = require("luxon"); // 11ty usually comes with luxonmodule.exports = function(eleventyConfig) {
// Date formatting filter
eleventyConfig.addFilter("postDate", (dateObj) => {
return DateTime.fromJSDate(dateObj).toLocaleString(DateTime.DATE_MED);
});return {
dir: {
input: ".",
output: "_site"
}
};
}; -
Update your layout to use the new filter:
{{ post.date | postDate }}
---
The Final Result
Your blog now has a logical flow. When you add a new file to your posts/ folder, 11ty detects the date, sorts it to the top of the sidebar, and Cloudflare deploys the update automatically.
Would you like to know how to add CSS to make the sidebar look better on mobile devices?